﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<head>
    <meta http-equiv="Refresh" content="300">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/lib/css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="/lib/css/themes/base/jquery.ui.all.css" />
    <link href="/lib/css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/plugins/slick.grid.css" type="text/css" />
    <link rel="stylesheet" href="/lib/css/jquery.jdMenu.css" type="text/css" />
    <link href="/plugins/CheckList/ui.dropdownchecklist.themeroller.css" rel="stylesheet" />
    <style type="text/css">
        /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
        .ui-layout-center, /* has content-div */ .ui-layout-west, /* has Accordion */ .ui-layout-east, /* has content-div ... */ .ui-layout-east .ui-layout-content
        {
            /* content-div has Accordion */
            padding: 0;
            overflow: hidden;
        }
        .ui-layout-center P.ui-layout-content
        {
            line-height: 1.4em;
            margin: 0; /* remove top/bottom margins from <P> used as content-div */
        }
        h3, h4
        {
            /* Headers & Footer in Center & East panes */
            font-size: 1.1em;
            background: #EEF;
            border: 1px solid #BBB;
            border-width: 0 0 1px;
            padding: 7px 10px;
            margin: 0;
        }
        .ui-layout-east h4
        {
            /* Footer in East-pane */
            font-size: 0.9em;
            font-weight: normal;
            border-width: 1px 0 0;
        }
        .menuContainerJSListBox
        {
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 50px;
            overflow: auto;
        }
        .DCTextClass
        {
            margin-top: 10px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 20px;
        }
        .NDPriceCss
        {
            
        }
        #loadingScreen
        {
            background: url(../images/ajax-loader.gif) no-repeat 5px 8px;
            padding-left: 25px;
        }
        .loadingScreenWindow .ui-dialog-titlebar-close
        {
            display: none;
        }
        .highlightPriceApporver
        {
            background-color: white;
            border: 1px solid black;
        }
        .highlightPriceApporver1
        {
            background-color: #1bbe46;
            height: 23px;
        }
        .highlightPriceApporver2
        {
            background-color: Orange;
            height: 23px;
        }
        
        .highlightPriceApporver3
        {
            background-color: #FF3300;
            height: 23px;
        }
    </style>
    <!-- REQUIRED scripts for layout widget -->
    <script src="/lib/js/jquery-latest.js" type="text/javascript"></script>
    <script src="/lib/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout-latest.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout.resizePaneAccordions-1.0.js"></script>
    <script src="/plugins/globalize.js" type="text/javascript"></script>
    <script type="text/javascript" src="/lib/js/themeswitchertool.js"></script>
    <script type="text/javascript" src="/lib/js/debug.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.positionBy.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.jdMenu.js"></script>
    <script src="/lib/js/jquery.event.drag-2.0.min.js"></script>
    <script src="/plugins/slick.editors.js"></script>
    <script src="/plugins/slick.core.js"></script>
    <script src="/plugins/slick.checkboxselectcolumn.js"></script>
    <script src="/plugins/slick.autotooltips.js"></script>
    <script src="/plugins/slick.cellrangedecorator.js"></script>
    <script src="/plugins/slick.cellrangeselector.js"></script>
    <script src="/plugins/slick.cellcopymanager.js"></script>
    <script src="/plugins/slick.cellselectionmodel.js"></script>
    <script src="/plugins/slick.rowselectionmodel.js"></script>
    <script src="/plugins/slick.formatters.js"></script>
    <script src="/plugins/slick.grid.js"></script>
    <script src="/Scripts/Helper.js" type="text/javascript"></script>
    <script src="/plugins/surge.core.js" type="text/javascript"></script>
    <script src="/plugins/surge.slickGrid.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-inherit.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-listbox.js" type="text/javascript"></script>
    <script src="/plugins/CheckList/ui.dropdownchecklist.js" type="text/javascript"></script>
    <script src="/Scripts/AjaxLoading.js" type="text/javascript"></script>
    <script src="/Scripts/CurrentTime.js" type="text/javascript"></script>
    <script src="/Scripts/validation.js" type="text/javascript"></script>
    <script type="text/javascript">
            window.onload = DisplayTime;
            var myLayout;
            var helper = new Helper();
            var approverAll = [];
            $(document).ready(function () {

                var rolename = $.cookie("userrole");
                if (rolename == null || rolename != 'Approver') {
                    window.location = '/Page/login.aspx';
                }

                myLayout = $('body').layout({
                    west__size: 234
                    , east__size: 300
                    // RESIZE Accordion widget when panes resize
                    , west__onresize: $.layout.callbacks.resizePaneAccordions
                    , east__onresize: $.layout.callbacks.resizePaneAccordions
                    , west__initClosed:true
                });

                $('ul.dropdown').jdMenu();
                // ACCORDION - in the West pane
                $("#accordion1").accordion({ fillSpace: true });

                // ACCORDION - in the East pane - in a 'content-div'
                $("#accordion2").accordion({
                    fillSpace: true
                    , active: 1
                });


                // THEME SWITCHER
                addThemeSwitcher('.ui-layout-north', { top: '12px', right: '5px' });
                // if a new theme is applied, it could change the height of some content,
                // so call resizeAll to 'correct' any header/footer heights affected
                // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
                setTimeout(myLayout.resizeAll, 1000); /* allow time for browser to re-render with new theme */

                $("#dialog-message" ).dialog({
                    autoOpen: false,
                    resizable: false,
                    height:120,
                    dialogClass: "Dialog",
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
            
                $("#dialog-RenewPincode").dialog({
                    autoOpen: false,
                    resizable: false,
                    height:230,
                    width:300,
                    dialogClass: "Dialog",
                    modal: true,
                    buttons: {
                        Cancel: function () {
                
                            $(this).dialog("close");
               
                        },
                        "Save": function () {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");

                            bValid = bValid && checkLength($('#newpincode'), "newpincode", 4, 4);
                            bValid = bValid && checkLength($('#confirmpincode'), "confirmpincode", 4, 4);
                            if ($('#newpincode').val() != $('#confirmpincode').val()) {
                                updateTips('new pincode not equals confirm pincode');
                                bValid = false;
                            }
                            if (bValid) {
                                helper.ReNewPincode($('#newpincode').val(), function () {
                                    MsgBox('Renew pincode completed');
                                    $('#newpincode').val('');
                                    $('#confirmpincode').val('');
                                    $("#dialog-RenewPincode").dialog("close");
                                });
                            }
                        }
                        
                    }
                });

                $("#dialog-verifyPincode").dialog({
                    autoOpen: false,
                    resizable: false,
                    height:230,
                    width:300,
                    dialogClass: "Dialog",
                    modal: true,
                    buttons: {
                        Cancel: function () {
                            $(".validateTips").removeClass("ui-state-highlight");
                            $('#verifypincode').val('');
                            $(this).dialog("close");
               
                        },
                        "Save": function () {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");

                            bValid = bValid && checkLength($('#verifypincode'), "verifypincode", 4, 4);
                
                            if (bValid) {
                                helper.VerifyPincode($('#verifypincode').val(), function (data) {
                                    if (data === 1) {
                                        var remark = $('#remark').val();
                                        if (action === 'approve') {
                                            verifyPincode();
                                            var doctype = '01';
                                            var status = '10';
                                            var remark2 = $('#remark2').val();
                                            var docData = { DocID: documentid, DocType:doctype, Status: status,Remark: remark, Remark2: remark2 };
                                            helper.UpdateDocumentStatus(docData, function(data) {
                                                MsgBox('Approved ' + data +' document Success');
                                                //showLayout('1');
                                                window.location.reload(true);
                                            });
                                        }
                                        else {
                                            var doctype = '01';
                                            var status = '20';
                                            var remark2 = $('#remark2').val();
                                            var docData = { DocID: documentid, DocType:doctype, Status: status, Remark: remark,Remark2: remark2 };
                                            helper.UpdateDocumentStatus(docData, function(data) {
                                                MsgBox('Rejected ' + data +' document Success');
                                                //showLayout('1');
                                                window.location.reload(true);
                                            });
                                        }
                                        $('#dialog-verifyPincode').dialog("close");
                                    }
                                    else {
                                        $(".validateTips")
                                            .show()
                                            .text("Pincode Incorrect")
                                            .addClass("ui-state-highlight");
                                        MsgBox("Pincode Incorrect");
                                    }
                                    //$("#dialog-verifyPincode").dialog("close");
                                });
                            }
                            $('#verifypincode').val('');
                        }
                        
                    }
                });
            
                showLayout('1');
                
                $("#bthQuickSearchDoc").button({
                 
                        icons: {
                            primary: "ui-icon-search"
                        }
                        })
			            .click(function () {
			                searchDocument();
			            });
                helper.GetAllApproveLevel(function(approval) {
                    approverAll = approval;
                     $.each(approverAll.AllApprover, function(i, v) {
                         if (i == 0) {
                              $('head').append("<style>.highlightPriceApporve { background-color:" + v.warningColor +" }</style>");
                             $('#approvalDisplay').text(v.approveDisplay);
                         }
                         else if (i== 3) {
                                $('#approvalDisplay' + i).text(v.approveDisplay);
                         } else {
                             $('head').append("<style>.highlightPriceApporver" + i +" { background-color:" + v.warningColor +" }</style>");
                             $('#approvalDisplay' + i).text(v.approveDisplay);  
                         }
                     
                    
                });
                });
            });
            var allFields = $([]).add($('#newpincode')).add($('#confirmpincode')),
                tips = $(".validateTips");

                function searchDocument(key) {
                    if (key == 13) {
                        event.cancelBubble = true;
                        return false;
                    }
                    var searchText = $("#txtQuickFilterDoc").val();
			                var filterDocs = jQuery.grep(allDocuments, function(element, index){
                                return element.DocID.toLowerCase().indexOf(searchText) != -1 || element.UserName.toLowerCase().indexOf(searchText) != -1; 
                            });

                            $.each(allTab, function(key, value) {
                                var datas;
                                datas = jQuery.grep(filterDocs, function(n, i) {
                                    if (value.StatusID === '10') {
                                        return ((n.Status === value.StatusID) || (n.Status === '40') || (n.Status === '50'));
                                    }
                                    else {
                                        return (n.Status === value.StatusID);
                                    }
                                    
                                });
                                documentgrids[value.StatusID].setData(datas);
                                documentgrids[value.StatusID].render();
                                //GridDocumentInit('#' + constGrid+ value.StatusID ,filterDocs,value.StatusID);
                            });
           
                    }
            function openRenewPincode() {
                var top = ($(window).height() - 250) / 2;
                var left = ($(window).width() - 350) / 2;
                $('#dialog-RenewPincode').dialog('open');
                $(".Dialog").css('left', left);
                $(".Dialog").css('top', top);
            }

            var action = 'approve';
            function verifyPincode(){
                var top = ($(window).height() - 250) / 2;
                var left = ($(window).width() - 350) / 2;
                $('#dialog-verifyPincode').dialog('open');
                $(".validateTips").hide();
                $(".Dialog").css('left', left);
                $(".Dialog").css('top', top);
            }

            var discountgrid;
            var documentid;
            var allDocuments;
            var allTab;
            var documentgrids = { };
            function showLayout(step, docid,doctype) {
                switch (step) {
                case '1':
                    $('#mainFrame').html($('#DocumentListApprovalStep').html());

                    var tabHtmlComplete = '';
                    var divHtmlComplate = '';
                    var tabItemHtml = '<ul>{0}<ul>';
                    var tabItemComplete = '';
                    var constTabID = 'tab';
                    var constGrid = 'grid';
                    var constAllstatus = 'all';
                    helper.GetStatusTab(function(allTabStatus) {
                        allTab = allTabStatus.AllStatus;
                        var htmltemplate = '<li ><a href="#{0}">{1}</a></li>';
                        //tabItemComplete += htmltemplate.format(constTabID + constAllstatus, 'ALL'); // add tab All
                        $.each(allTabStatus.AllStatus, function(key, value) {
                            if (value.StatusID === '11') {
                                tabItemComplete = htmltemplate.format(constTabID + value.StatusID, value.StatusDescription) + tabItemComplete;
                            }
                            else {
                                tabItemComplete += htmltemplate.format(constTabID + value.StatusID, value.StatusDescription);
                            }

                        });
                        tabHtmlComplete = tabItemHtml.format(tabItemComplete);
                        var divTemplate = '<div id="{0}"><div></div><div style="height:350px;"  id="{1}">{0}</div></div>';
                            //divHtmlComplate += divTemplate.format(constTabID + constAllstatus, constGrid+ constAllstatus); // add div grid all
                        $.each(allTabStatus.AllStatus, function(key, value) {
                            divHtmlComplate += divTemplate.format(constTabID + value.StatusID, constGrid+ value.StatusID);

                        });
                        $("#tabs").html(tabHtmlComplete).append(divHtmlComplate);
                        
                        helper.GetDocumentByApproveUser(function (alldocument) {
                            allDocuments = alldocument.AllDocument;
                            $.each(allTabStatus.AllStatus, function(key, value) {
                                GridDocumentInit('#' + constGrid+ value.StatusID ,alldocument.AllDocument,value.StatusID);
                            });
                        });
                    
                        $( "#tabs" ).tabs();
                    });

//                    helper.GetDocumentByApproveUser(function (alldocument) {
//                        allDocuments = alldocument.AllDocument;
//                        GridDocumentListApprovalStepInit('#gridDocumentListApprovalStep', alldocument.AllDocument, 'all');
//                    });


                    break;

                case '3':
                    $('#mainFrame').html($('#DocumentDetailApprovalStep').html());
                    buttonInit();
                    if (docid) {
                        documentid = docid;
                        $("#txtDocID").text(docid);
                        var docDetail = jQuery.grep(allDocuments, function(n, i){
                            return (n.DocID === documentid);
                        });
                        $.each(docDetail, function(key,value) {
                            $('#txtValidOn').val(value.ValidON);
                            $('#txtValidTo').val(value.ValidTO);
                            $('#txtSaleName').val(value.msalerep_name);
                            $('#txtSaleGroup').val(value.msalegrp_desc);
                            $('#remark').val(value.Remark);
                            $('#remark2').val(value.Remark2);
                            if (value.Status != '11') {
                                $('#approveButton').hide();
                            }
                        });
                        var optionsProductGridReadOnly = {
                            editable: false,
                            enableRowReordering: true,
                            enableCellNavigation: true,
                            asyncEditorLoading: false,
                            autoEdit: false
                        };
                        helper.GetColumnDocumentDetailByDocID(docid, doctype, function (columns) {
                            var cs = [];
                            cs.push({ id: "ProductDesc", name: "", field: "ProductDesc", minWidth: 60 });
                            cs.push({ id: "NDPrice", name: "NDPrice", field: "NDPrice", minWidth: 60, cssClass: 'NDPriceCss' });

                            $.each(columns.allColumns, function (key, value) {
                                if (value.ParentText != undefined && value.ParentText != null) {
                                    cs.push({ parentable: 1, id: value.RefID, dc: value.DCID, name: '(DC ' + value.DCID + ') ' + value.mcustname1 + "(" + value.ParentText + ")", field: value.RefID, minWidth: 60, width: 150, formatter: Slick.Formatters.DisableSupport, toolTip: value.ParentText });
                                }
                                else {
                                    cs.push({ parentable: 1, id: value.RefID, dc: value.DCID, name: '(DC ' + value.DCID + ') ' + value.mcustname1 , field: value.RefID, minWidth: 60, width: 150, formatter: Slick.Formatters.DisableSupport, toolTip: value.ParentText });
                                }
                            });

                           helper.GetDocumentDetailByDocID(docid, false, function(datas) {
                                var d =[];
                                helper.GetProductToSaleDocid(docid,function(data) {
                                    $.each(data.AllProduct, function (key, value) {
                                        $.each(datas.AllDocumentDetail, function(key2, value2) {
                                            var item = value2;
                                            if (value.mprodh_grpname === value2.ProductDesc) {
                                                item.NDPriceApprove1 = value.NDApproverLevel1;
                                                item.NDPriceApprove2 = value.NDApproverLevel2;
                                                item.NDPriceApprove3 = value.NDApproverLevel3;
                                                d.push(item);
                                            }
                                            
                                        });
                                    });
                                 });
                                
                                //sortJsonArrayByProp(d, "sort")();
                                RefreshGridDiscount(d, cs, optionsProductGridReadOnly);
                            });
                        });
                    }
                    
                    
                    break;
                }
            }
            var approveLevel = 0;
        function RefreshGridDiscount(datas, cs, options) {

           discountgrid = new Slick.Grid("#SaleCustomerDetailGrid", datas, cs, options);
           discountgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));

           discountgrid.onBeforeEditCell.subscribe(function(e, args) {
               var value = datas[args.row][discountgrid.getColumns()[args.cell].field];
               if (value === 'N/A') {
                   return false;
               } else {
                   return true;
               }

           });
           
           $('#realApprove').text(getRealApproval(datas, cs));
           discountgrid.onCellChange.subscribe(function(e,args) {
               $('#realApprove').text(getRealApproval()); 
           });
           
       }
        function findColumnIndex(cs, columnName) {
           for (var i = 0; i < cs.length; i++) {
               if(cs[i].field === columnName ) {
                   return i;
               }
           }
       }
        function getRealApproval(datas, cs) {
            if (datas === undefined) {
                datas = discountgrid.getData();
                cs = discountgrid.getColumns();
            }
            approveLevel = 0;
            $.each(cs, function (name, value) {
                var custId = value.id;
                if (value.dc != undefined) {
                    for (var v in datas) {
                        if (datas[v][custId] != 'N/A') {
                            var currentInputValue = datas[v].NDPrice - datas[v][custId];
                            if (currentInputValue <= datas[v].NDPriceApprove1) {
                                $('#approveLevelDetails').show();
                            }
                            else if (currentInputValue > datas[v].NDPriceApprove1 && currentInputValue <= datas[v].NDPriceApprove2) {
                                if (approveLevel < 1) {
                                    approveLevel = 1;
                                    $('#approveLevelDetails').show();
                                }
                            }
                            else if (currentInputValue > datas[v].NDPriceApprove2 && currentInputValue <= datas[v].NDPriceApprove3) {
                                if (approveLevel < 2) {
                                    approveLevel = 2;
                                    $('#approveLevelDetails').show();
                                }
                            }
                            else if (currentInputValue > datas[v].NDPriceApprove3) {
                                if (approveLevel < 3) {
                                    approveLevel = 3;
                                    $('#approveLevelDetails').show();
                                }
                            }
                        }
                    };
                }
            });
            var approvalDisaplay ="";
               $.each(approverAll.AllApprover, function(i, v) {
                if(v.approveLevel == approveLevel) {
                    approvalDisaplay += "   อำนาจอนุมัติ: " + v.approveDisplay;
                }
               });
            return approvalDisaplay;
        }
            function buttonInit() {
                $("#btnApprove")
                        .button({

                            icons: {
                                primary: "ui-icon-circle-check"
                            },
                        })
                        .click(function() {
                            action = 'approve';
                            verifyPincode();
                        });
                    $("#btnReject")
                        .button({

                            icons: {
                                primary: "ui-icon-circle-close"
                            },
                        })
                        .click(function() {
                            action = 'reject';
                            verifyPincode();
                        });
                    
                    $("#btnBackToDocList")
                        .button({

                            icons: {
                                primary: "ui-icon-circle-arrow-w"
                            },
                        })
                        .click(function() {
                            
                            showLayout('1');
                        });
            
            }

            function GridDocumentInit(gridtarget,allDocument, status) {
                var columnGridDocument = [
                    { id: "DocID", name: "Document ID", field: "DocID", width: 120, cssClass: "cell-title" },
                    { id: "Region", name: "Region", field: "Region" },
                    { id: "CreateBy", name: "CreateBy", field: "UserName", width: 80, resizable: false },
                    { id: "CreateOn", name: "CreateOn", field: "Created", minWidth: 60 },
                    { id: "Enter", name: "", field: "DocID", formatter: Slick.Formatters.Enter },
                ];
                var optionsDocumentGrid = {
                    editable: true,
                    enableRowReordering: true,
                    enableCellNavigation: true,
                    asyncEditorLoading: false,
                    autoEdit: false
                };

                var datas = [];
                if (status === 'all') {
                    datas = allDocument;
                } else {
                    datas = jQuery.grep(allDocument, function(n, i) {
                        if (status === '10') {
                            return (n.Status === status || n.Status === '40' || n.Status === '50');
                        }
                        else {
                            return (n.Status === status);
                        }
                    });
                }
                var documentgrid = new Slick.Grid(gridtarget, datas, columnGridDocument, optionsDocumentGrid);
                documentgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));
                documentgrid.onCellChange.subscribe(function(e, args) {
                    //updateUser(args.item);
                });
                documentgrids[status] = documentgrid;
            }

            function GridDocumentListApprovalStepInit(gridtarget, allDocument, searchText) {
                var columnGridDocument = [
                    { id: "DocID", name: "Document ID", field: "DocID", width: 120, cssClass: "cell-title" },
                    { id: "Region", name: "Region", field: "Region" },
                    { id: "CreateBy", name: "CreateBy", field: "UserName", width: 80, resizable: false },
                    { id: "CreateOn", name: "CreateOn", field: "Created", minWidth: 60 },
                    { id: "Enter", name: "", field: "DocID", formatter: Slick.Formatters.Enter },
                ];
                var optionsDocumentGrid = {
                    editable: false,
                    enableRowReordering: true,
                    enableCellNavigation: true,
                    asyncEditorLoading: false,
                    autoEdit: false
                };

                if (searchText === 'all') {
                    allDocument = allDocument;
                } else {
                    allDocument = jQuery.grep(allDocument, function (n, i) {
                        return (n.Status.indexOf(searchText) >= 0);
                    });
                }
                var documentgrid = new Slick.Grid(gridtarget, allDocument, columnGridDocument, optionsDocumentGrid);
                documentgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));
            }
    </script>
</head>
<body>
    <div class="ui-layout-north ui-widget-content" style="display: none;">
        <div id="main_header">
            <div class="logo" style="float: left; margin-top: 10px;">
                <img src="/images/logoNawa.png" alt="Nawaplastic Co.,Ltd." />
            </div>
            <div style="float: left; margin-top: 10px; margin-left: 100px;">
                <span style="font-family: verdana; font-size: 16px; font-weight: bold;" class="ui-state-highlight"
                    id="curTime"></span>
            </div>
            <div style="float: right; margin-right: 160px;">
                <div>
                    <div style="width: 70px; float: left">
                        User as:
                    </div>
                    <span class="userInfo" id="userNameShow">UserName</span><br />
                    <div style="width: 70px; float: left">
                        Logged in as:</div>
                    <span class="userInfo" id="SpanUserIP">IP</span>
                    <br />
                    <div style="width: 70px; float: left">
                        Role as :</div>
                    <span class="userInfo" id="SpanRoleShow">Role</span>
                </div>
            </div>
        </div>
        <div id="toolbarHolder">
            <div class="ui-state-default ui-corner-all ui-helper-clearfix">
                <ul id="main-menu" class="jd_menu dropdown ui-widget-header" onmouseover="myLayout.allowOverflow('north')"
                    onmouseout="myLayout.resetOverflow(this)">
                    <li><a href="#">Application &raquo;</a>
                        <ul class="ui-state-default">
                            <li><a href="/Page/ApprovalPage.htm">Approve Document Management</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Settings &raquo;</a>
                        <ul class="ui-state-default">
                            <li><a href="Javascript:openRenewPincode();">Renew Pincode</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="MessageBar" class="ui-layout-south ui-widget-content ui-state-error" style="display: none;">
        Message Bar
    </div>
    <div id="mainFrame" class="ui-layout-center" width="100%" height="600" frameborder="0"
        scrolling="auto">
    </div>
    <div id="DocumentListApprovalStep" style="display: none">
        <div style="padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;">
            <span style="float: left">Quick Search&nbsp;<input id="txtQuickFilterDoc" type="text" maxlength="50"> <button id="bthQuickSearchDoc">
                                                                                               Search</button></span>
        </div>
        <div id="tabs">
        </div>
    </div>
    <div id="DocumentDetailApprovalStep" style="display: none">
        <div style="padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;">
            <span id="Span1" class=" ui-corner-all" style="float: left">Valid On
                <input id="txtValidOn" type="text" readonly="readonly" />
                valid To
                <input id="txtValidTo" type="text" readonly="readonly" />
            </span>
            <div class="ui-state-highlight" style="float: left; margin-left: 10px; font-size: large">  <span style="font-size: large" id="SpanDocIDCaption">Document ID: </span> <span style="font-size: large" id="txtDocID"></span> </div>
            <span style="float: right">Sale Name:
                <input id="txtSaleName" type="text" readonly="readonly" />
                Sale Group:
                <input id="txtSaleGroup" type="text" readonly="readonly" />
            </span>
        </div>
        <div style="margin-left: 5px; margin-bottom: 10px;">
            <button id="btnBackToDocList" style="float: left;">
                Back To Document list</button>
           <div id="approveLevelDetails" style="float: left; display: none">
                <span style="padding-left: 10px;" class="ui-widget-content">ต้องการ <span id="approvalDisplay"></span> อนุมัติ</span> 

                <span style="padding-left: 10px;" class="highlightPriceApporver1">ต้องการ <span id="approvalDisplay1"></span> อนุมัติ</span>
                
                <span style="padding-left: 10px;" class="highlightPriceApporver2">ต้องการ <span id="approvalDisplay2"></span> อนุมัติ</span>

                <!--<span style="padding-left: 10px;" class="highlightPriceApporver3">ต้องการ <span id="approvalDisplay3"></span> อนุมัติ</span>

                <span style="padding-left: 10px;" class="highlightPriceApporver3">ต้องการ <span id="approvalDisplay4"></span> อนุมัติ</span> -->
                <span style="padding-left: 10px;" class="">Underline ราคาส่วนลดที่มากที่สุดในแต่ละรายการสินค้า</span>
            </div>
            <div style="clear: both">
            </div>
        </div>
        <div id="SaleCustomerDetailGrid" style="height: 250px;">
        </div>
        <div>
            <div style="margin: 5px; vertical-align: middle;">
                <div style="width: 150px; float: left;">
                    Remark(สำหรับ sale & SC):
                </div>
               <!-- <input id="remark" type="text" readonly="readonly" style="background-color: grey" />-->
                <textarea id="remark" cols="5" rows="3" style="width: 400px; background-color: grey"></textarea>
               <span id="realApprove" style="width: 60px;"></span>
            </div>
            <div style="margin: 5px; vertical-align: middle;">
                <div style="width: 150px; float: left;">
                    Remark2(สำหรับ ผู้อนุมัติ):
                </div>
                <textarea id="remark2" cols="5" rows="3" style="width: 400px;"></textarea>
        </div>
        <div id="approveButton" style="float: left; padding-left: 5px; padding-top: 10px">
            <button id="btnApprove">
                Approve</button>
            <button id="btnReject">
                Reject</button>
        </div>
    </div>
    <div class="ui-layout-west" style="display: none;">
        <h3 class="ui-widget-header">
            Navigation</h3>
        <div class="ui-layout-content">
            <div id="accordion1" class="basic">
                <h3>
                    <a href="#">Section 1</a></h3>
                <div>
                </div>
            </div>
        </div>
    </div>
    <div id="loadingScreen">
    </div>
    <div id="dialog-message" title="Information!">
        <p style="margin-top: 12px;">
            <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;">
            </span>
            <div id="dialogMessageID">
            </div>
        </p>
    </div>
    <div id="dialog-RenewPincode" title="Renew Pincode!" class="ui-dialog-content ui-widget-content"
        style="width: auto; min-height: 0px; height: 228.4px; display:none" scrolltop="0" scrollleft="0">
        <p class="validateTips">
            All form fields are required.</p>
        <fieldset>
            <div style="clear: both">
            </div>
            <label for="oldpincode">
                Old Pincode</label>
            <br />
            <input type="password" readonly="readonly" value="1234" style="width: 80%" class="text ui-widget-content ui-corner-all"
                id="oldpincode" name="oldpincode">
            <br />
            <label for="newpincode">
                New Pincode</label>
            <br />
            <input type="password" class="text ui-widget-content ui-corner-all" value="" id="newpincode"
                style="width: 80%" name="newpincode">
            <br />
            <label for="confirmpincode">
                Confirm Pincode</label>
            <br />
            <input type="password" class="text ui-widget-content ui-corner-all" value="" id="confirmpincode"
                style="width: 80%" name="confirmpincode">
        </fieldset>
    </div>
    <div id="dialog-verifyPincode" title="Verify Pincode!" class="ui-dialog-content ui-widget-content"
        style="width: auto; min-height: 0px; height: 228.4px; display:none;" scrolltop="0" scrollleft="0">
        <p class="validateTips">
            All form fields are required.</p>
        <fieldset>
            <div style="clear: both">
            </div>
            <label for="newpincode">
                Enter Pincode</label>
            <br />
            <br />
            <input type="password" class="text ui-widget-content ui-corner-all" value="" id="verifypincode"
                style="width: 90%" name="verifypincode">
            <br />
        </fieldset>
    </div>
</body>
</html>
